<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery MsgBox &raquo; Examples</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/global.css" />



  <script type="text/javascript" src="javascript/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="javascript/msgbox/jquery.msgbox.css" />
  <script type="text/javascript" src="javascript/msgbox/jquery.msgbox.min.js"></script>

</head>

<body>

  <div id="top">
    <div id="header">
        <h1>jQuery MsgBox <span>v1.3</span></h1>
    </div>

    <div class="hastoc">

        <p>MsgBox is compatible and fully tested with Safari 4+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+. </p>

        <p class="center"><img src="assets/jquerymsgbox.jpg" alt=""/></p>
        
        <div id="style-changer"><a href="../simple/index.html"></a></div>

    <div id="wrapper">
          <h2>Examples</h2>

          <h4>Example 1</h4>
          <div class="indent">

          <p class="center"><img src="assets/ex1.jpg" alt=""/></p>
          <p class="right"><button onclick='$.msgbox("The selection includes process white objects. Overprinting such objects is only useful in combination with transparency effects.");'>Example 1</button></p>
          <p>To simply call MsgBox like you would a regular alert command:</p>
<pre>
$.msgbox("The selection includes process white objects. Overprinting such objects is only useful in combination with transparency effects.");
</pre>
          
          </div>
          <h4>Example 2</h4>
          <div class="indent">
          <p class="center"><img src="assets/ex2.jpg" alt=""/></p>
          <p class="right"><button onclick='$.msgbox("Are you sure that you want to permanently delete the selected element?", {type: "confirm",buttons : [{type: "submit", value: "Yes"},{type: "submit", value: "No"},{type: "cancel", value: "Cancel"}]}, function(result) { $("#result2").text(result); });'>Example 2</button></p>
          <p>To add a couple extra buttons with different values:</p>
<pre>
$.msgbox("Are you sure that you want to permanently delete the selected element?", {
  type: "confirm",
  buttons : [
    {type: "submit", value: "Yes"},
    {type: "submit", value: "No"},
    {type: "cancel", value: "Cancel"}
  ]
}, function(result) {
  $("#result2").text(result);
});
</pre>
<pre>
Result: <span id="result2"></span>
</pre>









          </div>
          <h4>Example 3</h4>
          <div class="indent">
          <p class="center"><img src="assets/ex3.jpg"  alt=""/></p>
          <p class="right"><button onclick='$.msgbox("jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.", {type: "info"});'>Example 3</button></p>
<pre>
$.msgbox("jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.", {type: "info"});
</pre>










          </div>
          <h4>Example 4</h4>
          <div class="indent">
          <p class="center"><img src="assets/ex4.jpg"  alt=""/></p>
          <p class="right"><button onclick='$.msgbox("An error 1053 ocurred while perfoming this service operation on the MySql Server service.", {type: "error"});'>Example 4</button></p>
<pre>
$.msgbox("An error 1053 ocurred while perfoming this service operation on the MySql Server service.", {type: "error"});
</pre>




          </div>
          <h4>Example 5</h4>
          <div class="indent">
          <p class="center"><img src="assets/ex5.jpg"  alt=""/></p>
          <p class="right"><button onclick='$.msgbox("Insert your name below:", {type: "prompt"}, function(result) {if (result) {alert("Hello "+result);}});'>Example 5</button></p>
<pre>
$.msgbox("Insert your name below:", {
  type: "prompt"
}, function(result) {
  if (result) {
    alert("Hello " + result);
  }
});
</pre>

          </div>


          <h2>Advanced Examples</h2>

          <h4>Advanced Example 1</h4>
          <div class="indent">
          <p class="center"><img src="assets/aex1.jpg"  alt=""/></p>
          <p class="right"><button id="advancedexample1">Example 1</button></p>
<pre>
$("#advancedexample1").click(function() {
  $.msgbox("&lt;p&gt;In order to process your request you must provide the following:&lt;/p&gt;", {
    type    : "prompt",
    inputs  : [
      {type: "text",     label: "Insert your Name:", value: "George", required: true},
      {type: "password", label: "Insert your Password:", required: true}
    ],
    buttons : [
      {type: "submit", value: "OK"},
      {type: "cancel", value: "Exit"}
    ]
  }, function(name, password) {
    if (name) {
      $.msgbox("Hello &lt;strong&gt;"+name+"&lt;/strong&gt;, your password is &lt;strong&gt;"+password+"&lt;/strong&gt;.", {type: "info"});
    } else {
      $.msgbox("Bye!", {type: "info"});
    }
  });
});
</pre>
          </div>



<script type="text/javascript">
$("#advancedexample1").click(function() {
  $.msgbox("<p>In order to process your request you must provide the following:</p>", {
    type    : "prompt",
    inputs  : [
      {type: "text",     label: "Insert your Name:", value: "George", required: true},
      {type: "password", label: "Insert your Password:", required: true}
    ],
    buttons : [
      {type: "submit", value: "OK"},
      {type: "cancel", value: "Exit"}
    ]
  }, function(name, password) {
    if (name) {
      $.msgbox("Hello <strong>"+name+"</strong>, your password is <strong>"+password+"</strong>.", {type: "info"});
    } else {
      $.msgbox("Bye!", {type: "info"});
    }
  });
});
</script>





          <h4>Advanced Example 2</h4>
          <div class="indent">
          <p class="center"><img src="assets/aex1.jpg"  alt=""/></p>
          <p class="right"><button id="advancedexample2">Example 2</button></p>
<pre>
$('#advancedexample2').click(function(ev) {

  $.msgbox("&lt;p&gt;In order to process your request you must provide the following:&lt;/p&gt;", {
    type    : "prompt",
    name    : "lock",
    inputs  : [
      {type: "text",     name: "username", value: "", label: "Username:", required: true},
      {type: "password", name: "password", value: "", label: "Password:", required: true}
    ],
    buttons : [
      {type: "submit", name: "submit", value: "Sign In"},
      {type: "cancel", value: "Cancel"}
    ],
    form : {
      active: true,
      method: 'post',
      action: 'login.php'
    }
  });
  
  ev.preventDefault();

});
</pre>
          </div>



<script type="text/javascript">
$('#advancedexample2').click(function(ev) {

  $.msgbox("<p>In order to process your request you must provide the following:</p>", {
    type    : "prompt",
    name    : "lock",
    inputs  : [
      {type: "text",     name: "username", value: "", label: "Username:", required: true},
      {type: "password", name: "password", value: "", label: "Password:", required: true}
    ],
    buttons : [
      {type: "submit", name: "submit", value: "Sign In"},
      {type: "cancel", value: "Cancel"}
    ],
    form : {
      active: true,
      method: 'post',
      action: 'login.php'
    }
  });
  
  ev.preventDefault();

});
</script>






        </div>

    </div><!--/hastoc-->
  </div>
  <!-- Syntax highlighting Javascript http://www.howtocreate.co.uk/tutorials/jsexamples/syntax/ -->
</body>
</html>